<template>
  <div class="table-box">
    <ProTable ref="proTableRef" row-key="id" title="野保相机" :columns="columns" :request-api="loadTable" highlight-current-row>
      <!-- 账户操作 -->
      <template #operation="scope">
        <ElButton type="primary" link :icon="EditPen" @click="onEditClicked(scope.row)">标识物种</ElButton>
        <ElButton type="primary" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
      </template>
    </ProTable>
    <WildCameraAttachForm ref="formRef" @success="refresh" />
  </div>
</template>

<script setup lang="ts" name="ZLWildCameraAttach">
import { Delete, EditPen } from '@element-plus/icons-vue'
import WildCameraAttachForm from './wild-camera-attach-form.vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { WildCameraAttach, pageWildCameraAttach, removeWildCameraAttach } from '@api/tby/education/WildCameraAttach'
import { WildCamera, listWildCamera } from '@api/tby/education/wildCamera'
import { dateFormat } from '@api/tby/common/common'
const proTableRef = ref<ProTableInstance>()

const cameraSelectData = ref<OptionType[]>([])

function refresh() {
  proTableRef.value?.getTableList()
}

function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

const FileTypeEnum = [
  { value: 'VIDEO', label: '视频' },
  { value: 'IMAGE', label: '图片' }
]

// 表格列
const columns = reactive<ColumnProps<WildCameraAttach.Record>[]>([
  { type: 'index', label: '序号', width: 60, index: getIndex },
  {
    prop: 'shotDateFormat',
    label: '拍摄时间',
    align: 'center',
    search: { el: 'date-picker', key: 'shotDate', props: { type: 'daterange' } }
  },
  {
    prop: 'cameraId',
    label: '设备名称',
    enum: cameraSelectData,
    search: { el: 'select', key: 'cameraId' },
    align: 'center'
  },
  { prop: 'speciesName', label: '物种名称', align: 'center' },
  {
    prop: 'fileType',
    label: '影像类型',
    enum: FileTypeEnum,
    tag: true,
    search: { el: 'select', key: 'fileType', order: 2 }
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
])

const loadTable = (query: WildCameraAttach.Query) => {
  query.order = 'shot_date desc'
  if (query.shotDate) {
    query.shotDateBegin = dateFormat(new Date(query.shotDate[0]).getTime(), 'yyyy-MM-dd')
    query.shotDateEnd = dateFormat(new Date(query.shotDate[1]).getTime(), 'yyyy-MM-dd')
    query.shotDate = undefined
  }
  return pageWildCameraAttach(query)
}
// 打开 drawer(新增、查看、编辑)
const formRef = ref<InstanceType<typeof WildCameraAttachForm> | null>(null)

// 编辑账户
const onEditClicked = (row: any) => {
  formRef.value?.open(row.id)
}

// 删除账户
const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('您确定要删除该信息吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      removeWildCameraAttach(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        proTableRef.value?.getTableList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '删除取消!'
      })
    })
}

onMounted(async () => {
  let { data } = await listWildCamera({} as WildCamera.Query)
  cameraSelectData.value = []
  for (let i = 0; i < data.length; i++) {
    cameraSelectData.value.push({
      value: data[i].id,
      label: data[i].name
    })
  }
})
</script>
